<template>
  <div>
    <el-dialog title="修改项目信息" :visible.sync="editShow" append-to-body>
      <ItemEdit ref="childEdit" />
    </el-dialog>
    <el-dialog title="新项目" :visible.sync="addShow" append-to-body>
      <ItemAdd />
    </el-dialog>
    <!-- 查询按钮组 -->
    <el-row class="wc">
      <span>
        <el-button type="primary" @click="addItem()" round>
          添加新项目
        </el-button>
      </span>
    </el-row>
    <!-- 表格内容 -->
    <el-table
      :data="tableData"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      ref="btnTable"
      stripe
      style="width: 100%"
    >
      <el-table-column prop="itemName" label="项目名" align="center">
      </el-table-column>
      <el-table-column
        prop="itemDate"
        label="完成时间"
        width="120"
        align="center"
      >
      </el-table-column>
      <!-- 照片 -->
      <el-table-column
        prop="itemImg1"
        label="项目图片1"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          <el-popover placement="top-start" trigger="hover">
            <!-- 触摸大图 -->
            <img
              :src="scope.row.itemImg1"
              style="width: 150px; height: 150px"
            />
            <!-- 预览小图 -->
            <img
              slot="reference"
              :src="scope.row.itemImg1"
              style="width: 50px; height: 50px"
            />
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="itemImg2"
        label="项目图片2"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          <el-popover placement="top-start" trigger="hover">
            <!-- 触摸大图 -->
            <img
              :src="scope.row.itemImg2"
              style="width: 150px; height: 150px"
            />
            <!-- 预览小图 -->
            <img
              slot="reference"
              :src="scope.row.itemImg2"
              style="width: 50px; height: 50px"
            />
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="itemFirst"
        label="介绍第一段"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="itemSecond"
        label="介绍第二段"
        show-overflow-tooltip
      ></el-table-column>
      <!-- 编辑组 -->
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <!-- 分割线 -->
          <el-divider direction="vertical"></el-divider>
          <el-popconfirm
            confirm-button-text="好的"
            cancel-button-text="不用了"
            icon="el-icon-info"
            icon-color="red"
            title="这是你的尊师确定删除吗？"
            @confirm="Delete(scope.$index, scope.row)"
          >
            <el-button type="text" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--closed代表动画结束后调用 -->
    <el-dialog
      title="温馨提示"
      :visible.sync="successVisible"
      width="20%"
      @close="refr"
      append-to-body
    >
      <div class="dialogSuc">
        <el-button
          type="success"
          icon="el-icon-check"
          circle
          @click="successVisible"
        ></el-button>
        <h2>{{ msgDialog }}</h2>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ItemEdit from '@/components/main/index2/edit/itemEdit'
import ItemAdd from '@/components/main/index2/add/itemAdd'
export default {
  data() {
    const _this = this;
    return {
      input: "", //搜索
      editShow: false,//出表单编辑删除弹窗控制
      addShow: false,
      tableData: [],
      successVisible: false, //成功提示
      loading: true,
      msgDialog: "删除成功" //提示变量
    };
  },
  components: {
    ItemEdit,
    ItemAdd
  },
  created() {
    const _this = this;
    // 打开页面向后端请求显示全部数据
    this.axios({
      method: "get",
      // 公共变量baseUrl已经定义在main.js.用于修改后端端口
      url: _this.baseUrl + "/index2/get/index2Items",
    }).then(function (resp) {
      console.log(resp.data)
      _this.tableData = resp.data;//el-table数据的前后交互 必须保证前后端pojo类名字一样
      for (let i = 0; i < _this.tableData.length; i++) {
        let date = _this.tableData[i].itemDate + ""; //转换成字符型
        _this.tableData[i].itemDate = date.substr(0, 10);
        _this.tableData[i].itemImg1 =
          _this.imgUrl + resp.data[i].itemImg1; //图片1
        _this.tableData[i].itemImg2 =
          _this.imgUrl + resp.data[i].itemImg2; //图片2
      }
      _this.loading = false;
    });
  },
  methods: {
    successEdit() {
      this.editShow = false;
      this.msgDialog = "修改成功";
      this.successVisible = true;
    },
    successAdd() {
      this.editShow = false;
      this.msgDialog = "添加成功";
      this.successVisible = true;
    },
    // 按照ID号修改信息 index是显示行号,row是显示行的对象全部内容
    handleEdit(index, row) {
      console.log("传送前:" + row.id);
      this.editShow = true;
      //因为是懒加载,所以必须延迟100毫秒
      setTimeout(() => {
        this.$refs.childEdit.assignData(row.id);
      }, 100)
    },
    // 按照ID号删除 index是显示行号,row是显示行的对象全部内容
    Delete(index, row) {
      console.log(index, row.id);
      const _this = this;
      this.axios({
        method: "get",
        // 公共变量baseUrl 已经定义在main.js.用于修改后端端口
        url: _this.baseUrl + "/index2/get/deleteItem/" + row.id,
      }).then(function (resp) {
        console.log(resp.data);
        _this.successVisible = true
      });
    },
    //跳转添加页面
    addItem() {
      this.addShow = true;
    },
    //刷新页面 (删除成功后,给与提示信息,提示动画结束后调用)
    refr() {
      location.reload()
    }
  },
};
</script>

<style lang="less">
.dialogSuc {
  display: block;
  margin: 0 auto;
  width: 50%;
  button {
    display: block;
    margin: 0 auto;
  }
  h2 {
    color: green;
    text-align: center;
  }
}
</style>